<template>
	<view class="content">
		<view class="centent-left">
			<view :class="!item.flag ? 'left-item':'left-item2'" v-for="(item,index) in dataList" :key="index" @click="setLeft(item)">
				<image :src="item.icon"></image>
				<span>{{item.name}}</span>
			</view>
		</view>
		<view class="centent-center">
			<view :class="!item.flag ? 'center-item':'center-item2'" v-for="(item,index) in dataCenter" :key="index" @click="setCenter(item)">
				<span>{{item.name}}</span>
			</view>
		</view>
		<view class="centent-right">
			<view :class="!item.flag ? 'center-item':'center-item2'" v-for="(item,index) in dataRight" :key="index" @click="setRight(item)">
				<span>{{item.name}}</span>
			</view>
		</view>
		<view class="button">
			<u-button type="primary" class="styleCss"  hover-class="none" shape="circle" @click="setData">确认</u-button>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			dataList: [],
			dataCenter: [],
			dataRight: [],
			userData: {}
		}
	},
	methods:{
		setData(){
			uni.redirectTo({
				url: '../addPet/addPet?userData='+JSON.stringify(this.userData)
			})
		},
		setRight(e){
			if(!e.flag){
				e.flag = true
				this.dataList.forEach(item=>{
					if(item.children.length != 0){
						item.children.forEach(data=>{
							if(data.children.length != 0){
								data.children.forEach(items=>{
									if(items.id != e.id){
										items.flag = false
									}
								})
							}
						})
					}
				})
			}
			this.userData.cascade = e.name
			this.userData.cascadeId = e.id
		},
		setCenter(e){
			if(!e.flag){
				e.flag = true
				this.dataList.forEach(item=>{
					if(item.children.length != 0){
						item.children.forEach(data=>{
							if(data.id != e.id){
								data.flag = false
							}
							if(data.children.length != 0){
								data.children.forEach(min=>{
									min.flag = false
								})
							}
						})	
					}
				})
			}
			
			this.dataRight = e.children
		},
		setLeft(e){
			if(!e.flag){
				e.flag = true
				let iconList = [
					{
						icon1: '../../../static/img/remen.png',
						icon2: '../../../static/img/remen2.png'
					},
					{
						icon1: '../../../static/img/polulei.png',
						icon2: '../../../static/img/polulei2.png'
					},
					{
						icon1: '../../../static/img/paxinglei.png',
						icon2: '../../../static/img/paxinglei2.png'
					},
					{
						icon1: '../../../static/img/niaolei.png',
						icon2: '../../../static/img/niaolei2.png'
					},
					{
						icon1: '../../../static/img/jiezhi.png',
						icon2: '../../../static/img/jiezhi2.png'
					},
					{
						icon1: '../../../static/img/liangxi.png',
						icon2: '../../../static/img/liangxi2.png'
					},
					{
						icon1: '../../../static/img/shuizu.png',
						icon2: '../../../static/img/shuizu2.png'
					}
				]
				this.dataList.forEach((item,i)=>{
					item.icon = iconList[i].icon1
					if(item.id != e.id){
						item.flag = false
					}else{
						item.icon = iconList[i].icon2
					}
					if(item.children.length != 0){
						item.children.forEach(data=>{
							data.flag = false
							if(data.children.length != 0){
								data.children.forEach(min=>{
									min.flag = false
								})
							}
						})
						
					}
				})
			}
			this.dataRight = []
			this.dataCenter = e.children
		},
		getData(){
			this.$request(this.commonApi.typeTree,'GET').then(res=>{
				let data = res.data.data
				this.dataList = data
				this.setLeft(data[0])
				this.setCenter(data[0].children[0])
				this.setRight(data[0].children[0].children[0])
			})
		}
	},
	mounted() {
		this.getData()
	},
	onLoad(option) {
		this.userData = JSON.parse(option.userData)
	}
};
</script>

<style lang="scss" scoped>
	.styleCss{
		width: 660rpx;
	}
	.button /deep/ .u-btn--primary{
		background: #FFCC00;
	}
	.button{
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		position: absolute;
		bottom: 0;
		left: 0;
		background: white;
		padding: 60rpx 0;
		z-index: 1;
	}
	.center-item2{
		width: 100%;
		height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: row;
		background: rgba(255, 154, 0, 0.08);
		font-size: 28rpx;
		color: #FF9A00;
		font-weight: bold;
		span{
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 0 12rpx;
		}
	}
	.center-item{
		width: 100%;
		height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: row;
		background: white;
		font-size: 28rpx;
		font-weight: bold;
		span{
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 0 12rpx;
		}
	}
	.left-item2{
		width: 100%;
		height: 100rpx;
		display: flex;
		align-items: center;
		flex-direction: row;
		background: rgba(255, 154, 0, 0.08);
		color: #FF9A00;
		font-size: 28rpx;
		font-weight: bold;
		image{
			width: 50rpx;
			height: 50rpx;
			margin: 0 20rpx;
		}
		span{
			
		}
	}
	.left-item{
		width: 100%;
		height: 100rpx;
		display: flex;
		align-items: center;
		flex-direction: row;
		background: white;
		font-size: 28rpx;
		font-weight: bold;
		image{
			width: 50rpx;
			height: 50rpx;
			margin: 0 20rpx;
		}
		span{
			
		}
	}
	.centent-center{
		width: 33.2%;
		height: 80vh;
		overflow-y: scroll;
		border-right: 2rpx solid #f2f2f2;
	}
	.centent-right{
		width: 33.2%;
		height: 80vh;
		overflow-y: scroll;
	}
	.centent-left{
		width: 33.2%;
		height: 80vh;
		overflow-y: scroll;
		border-right: 2rpx solid #f2f2f2;
	}
.content {
	width: 100%;
	height: 100vh;
	display: flex;
	flex-direction: row;
}
</style>
